<template>
    <div>
        <h2>权限设置</h2>
        <el-card shadow="never" style="margin-bottom: 15px">
    
            <!-- 搜索部分 -->
            <el-form :inline="true"  class="demo-form-inline"  :model="searchData">
                <el-form-item label="按钮名称:" prop="name" >
                     <el-input v-model="searchData.title"></el-input>
                </el-form-item>
                <el-form-item >
                     <el-button type="primary">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card >
        <el-card shadow="never">
            <!-- 表格渲染 -->
             <el-button type="primary" style="margin-bottom: 10px;"

              @click="dialogVisible=true">添加菜单</el-button>
            <BaseTable :data="tableData.rows" :total="tableData.total" :checkbox="checkbox" v-model="pageData"
                :columns="columns">
                <template #show="{ row }">
                    <el-switch v-model="row.show"
                    @change="changeState(row)"
                     inline-prompt :active-value="true"
                        :inactive-value="false"></el-switch>
                </template>
                <template #icon="{row}">
                    <el-icon>
                        <component :is="(icons as any)[row.icon]"></component>
                    </el-icon>
                </template>
                <template #type="{ row }">
                <el-tag v-if="row.type == 'menu'" type="primary">菜单</el-tag>
                <el-tag v-if="row.type == 'button'" type="warning">按钮</el-tag>
                    </template>
                <template #action="{ row }">
                    <!-- <el-button type="primary" text @click="updateGoddsFile(row)">编辑</el-button> -->
                     <a href="#" @click.prevent="updateGoddsFile(row)" style="margin-right: 15px">编辑</a>
                     <a href="#" @click.prevent="SureDeleteBefore(row)">删除</a>
                </template>
            </BaseTable>
            <!-- 编辑弹出框 -->
            <AuSetDialog
            @getAllMemu="getAllMemu"
            @getAllMemuNotPage="getAllMemuNotPage"
             v-model="dialogVisible"
            :ruleForm="ruleForm"
            :allUserMan="allUserMan"
            ></AuSetDialog>
        </el-card>
        
    </div>
</template>

<script setup lang="ts">
import api from '@/api';
import AuSetDialog from './dialog/AuSetDialog.vue';
import { onMounted, ref, reactive,watch } from 'vue';
import { UserManageItm } from '@/api/modules/authorityMenu';
import { ElMessage, ElMessageBox } from 'element-plus';
import * as icons from '@element-plus/icons-vue'
const columns = [
    {
        label: '菜单名称',
        prop: 'title'
    },
    { label: '路由路径', prop: 'path' },
    { label: '组件路径', prop: 'component' },
    {
        label: '类型',
        prop: 'type'
    },
    {
        label: '菜单图标',
        prop: 'icon'
    },
    {
        label: '排序',
        prop: 'order'
    },
    {
        label: '是否显示',
        prop: 'show'
    },
    {
        label: '操作',
        prop: 'action'
    },
]
// 查询角色的数据
const searchData=reactive({
    title:''
})
const dialogVisible=ref(false)
let tableData = reactive({
    rows: [],
    total: 0
})
const checkbox = ref(false)
// 分页数据
const pageData = ref<PageQuery>({
    currentPage: 1,
    pageSize: 10
})
const ruleForm=ref<any>({})
// 查询所有的角色数据
const allSeacheData=ref({})
let allUserMan=ref<any[]>([])
// 配送员分页条变化
watch(pageData.value, () => {
    getAllMemu(), {
        deep: true
    }
})
// 删除前确认删除
const SureDeleteBefore = (row: UserManageItm) => {
    ElMessageBox.confirm(
        '您确认删除吗?',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        deleteGoddsFile((row as any)._id)
        // ElMessage.success("配送员删除成功")
    })
}
const deleteGoddsFile=(_id:string)=>{
    api.authorityMenu.remove({
        _id,
        creator: 'twy'
    }).then(res => {
        if (res.code == 200) {
            getAllMemu();
            ElMessage.success('菜单数据删除成功');
        } else {
            ElMessage.error(res.message);
        }
    })
}
onMounted(() => {
    getAllMemu()
    getAllMemuNotPage()
})
// 获取所有菜单分页
const getAllMemu = async () => {
    const res = await api.authorityMenu.search({
         creator: "twy",...pageData.value
        })
    if (res.code == 200) {
        tableData.rows = res.data.rows
        tableData.total=res.data.total
        console.log(res.data);
        
    }
}
// 获取所有菜单角色不分页
const getAllMemuNotPage = async () => {
    const res = await api.authorityMenu.search({
         creator: "twy",...allSeacheData.value
        })
    if (res.code == 200) {
        allUserMan.value = [
            {_id:'0',title:"无"},
            ...res.data.rows
        ]
    }
}
// 点击编辑回显菜单
const updateGoddsFile=(data:UserManageItm)=>{
    ruleForm.value={...data}
    dialogVisible.value=true
    // console.log(data);
    
}
// j修改菜单的状态
const changeState=(data:any)=>{
    console.log(data);

}
// 修改菜单

// 弹窗关闭数据清空
watch(dialogVisible,()=>{
    if(!dialogVisible.value){
      ruleForm.value={}
    }
  },
)
</script>

<style scoped></style>